/*
 * @Descripttion: 检查任务页面
 * @version: 
 * @Author: linPing
 * @Date: 2019-10-29 12:25:00
 * @LastEditTime: 2019-11-04 16:17:05
 */



import React, { Fragment } from 'react';

import { observer, inject } from 'mobx-react';
import NavigationBar from '../../common/NavigationBar';
import GlobalStyles from "../../res/styles/GlobalStyles";
import { ButtonGroup } from 'react-native-elements'
// import FlatListComponent from '../../common/FlatList'
import NavigationUtil from '../../navigator/NavigationUtil'
import ViewUtil from "../../util/ViewUtil";
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    RefreshControl,

    TouchableOpacity,
    Button,
    View,
    FlatList,
    Text,
    StatusBar,
} from 'react-native';
import SafeAreaViewPlus from "../../common/SafeAreaViewPlus";
import VisibleView from "../../common/VisibleView";
import appStore from '../../Mobx/appStore';
// import { TouchableOpacity } from 'react-native-gesture-handler';

const LIST_GROUP = {
    inspectionRecord: 'inspectionRecord',
    rectificationRecord: 'rectificationRecord',
}
const originalData = {
    totalPage: 1, pageIndex: 1,
    items: [
        {
            id:"sadf465as4df654asfd654sadf54s0000",
            title: '日常检查1',
            desc: '逸夫楼、化学实验楼',
            roomTotal: 29,
            completeTotal: 0,
            createDate: '2019-10-15',
            endDate: '2019-10-15',
            status: 0,
            authorName: "郑林平",
            supervision: "王老师、李老师",
            remark: "赶紧的检查,赶紧的检查赶紧的检赶紧的检查赶紧的检查赶紧的检查赶紧的检查查赶紧的检查赶紧的检查,赶紧的检查",
            building: [
                {
                    id:"s6a5d4f65sad4f56sa4df65s4daf54s1111",
                    title: '逸夫楼',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                    room: [
                        {
                            id:"erf464d6sf4sa5df45sad65f463333",
                            title: '105房间',
                            managerName: "李老师",
                            managerTel: "18516035775",
                            collegManager: '詹姆斯',
                            labName: "新媒体实验室",
                            collegName: "化工学院",
                            buildName: "逸夫楼",
                            level: "B",
                            hiddenNum: 0,
                            remark: '我特么的是特殊的房间我特么的是特殊的房间我特么的是特殊的房间我特么的是特殊的房间我特么的是特殊的房间我特么的是特殊的房间',
                            status: 0, //0未检查，1待提交，2已提交
                            highlight: {
                                image_url: [],
                                desc: '',
                                check_id: ''//检查人的ID
                            },
                            hidden_danger: {
                                check_id: '',//检查人的ID
                                items: [
                                    {
                                        image_url: [],
                                        desc: "",
                                        checkItemId: '',
                                        checkItemTitle: '',
                                        checkItemDesc: '检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查检查查检查检查检查检查检查检查检查检查检查检查'
                                    }
                                ]
                            }

                        },
                        {
                            title: '105房间',
                            managerName: "李老师",
                            managerTel: "18516035775",
                            collegManager: '詹姆斯',
                            labName: "新媒体实验室",
                            collegName: "化工学院",
                            buildName: "逸夫楼",
                            level: "B",
                            hiddenNum: 0,
                            remark: '我特么的是特殊的房间我特么的是特殊的房间我特么的是特殊的房间我特么的是特殊的房间我特么的是特殊的房间我特么的是特殊的房间',
                            status: 0, //0未检查，1待提交，2已提交
                            highlight: {
                                image_url: [],
                                desc: '',
                                check_id: ''//检查人的ID
                            },
                            hidden_danger: {
                                check_id: '',//检查人的ID
                                items: [
                                    {
                                        image_url: [],
                                        desc: [],
                                        checkItemId: '',
                                        checkItemTitle: '',
                                        checkItemDesc: '检查检查检查检查检查检查检查'
                                    },
                                    {
                                        image_url: [],
                                        desc: [],
                                        checkItemId: '',
                                        checkItemTitle: '',
                                        checkItemDesc: ''
                                    },  {
                                        image_url: [],
                                        desc: [],
                                        checkItemId: '',
                                        checkItemTitle: '',
                                        checkItemDesc: ''
                                    },  {
                                        image_url: [],
                                        desc: [],
                                        checkItemId: '',
                                        checkItemTitle: '',
                                        checkItemDesc: ''
                                    },  {
                                        image_url: [],
                                        desc: [],
                                        checkItemId: '',
                                        checkItemTitle: '',
                                        checkItemDesc: ''
                                    }
                                ]
                            }

                        },
                        {title: '105房间',},
                        {title: '105房间',},
                        {title: '105房间',},
                        {title: '105房间',},
                        {title: '105房间',},
                        {title: '106房间',},
                        {title: '107房间',},
                        {title: '108房间',},
                        {title: '109房间',},
                    ]
                },
                {
                    title: '化学楼2',
                    status: 1,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼3',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼4',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼5',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼6',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼7',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼6',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼6',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼6',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                },
                {
                    title: '化学楼6',
                    status: 0,
                    roomTotal: 29,
                    completeTotal: 0,
                }
            ]

        },
        {
            title: '日常检查2',
            desc: '逸夫楼、化学实验楼',
            roomTotal: 29,
            completeTotal: 0,
            endDate: '2019-10-15',
            status: 0
        },
        {
            title: '日常检查3',
            desc: '逸夫楼、化学实验楼',
            roomTotal: 29,
            completeTotal: 0,
            endDate: '2019-10-15',
            status: 0
        },
        {
            title: '日常检查4',
            desc: '逸夫楼、化学实验楼',
            roomTotal: 29,
            completeTotal: 0,
            endDate: '2019-10-15',
            status: 1
        },
        {
            title: '日常检查5',
            desc: '逸夫楼、化学实验楼',
            roomTotal: 29,
            completeTotal: 0,
            endDate: '2019-10-15',
            status: 1
        },
        {
            title: '日常检查6',
            desc: '逸夫楼、化学实验楼',
            roomTotal: 29,
            completeTotal: 0,
            endDate: '2019-10-15',
            status: 1
        },
        {
            title: '日常检查7',
            desc: '逸夫楼、化学实验楼',
            roomTotal: 29,
            completeTotal: 0,
            endDate: '2019-10-15',
            status: 1
        },
        {
            title: '日常检查8',
            desc: '逸夫楼、化学实验楼',
            roomTotal: 29,
            completeTotal: 0,
            endDate: '2019-10-15',
            status: 1
        },


    ]
}

@inject('appStore')
@observer
export default class TaskPage extends React.Component {
    constructor(props) {
        super(props)
        this.title = "检查任务"
        this.params = this.props.navigation.state.params
        this.state = {
            isLoading: false, //下拉刷新loading
            loadMore:false, //是否还有数据
            hideMore:true, //是否隐藏分页
            selectedIndex: 0, //TabIndex
            data: originalData.items 
        }
        this.updateIndex = this.updateIndex.bind(this)
        // this.pageIndex = originalData.pageIndex
        // this.pageTotal = originalData.totalPage
    }
    componentDidMount() {
        
        // global.navigation = this.props.navigation
    }
    componentWillUnmount() {
        // global.navigation = null
    }
 
    _renderItem(data) {
        const { item } = data

        return <TouchableOpacity
            onPress={() => {
                appStore.changeTaskKey(item.id)
                NavigationUtil.goPage({ item }, "TaskDetailPage")
            }}
        >
            <View style={[styles.itemBox]}>
                <View style={styles.row}>
                    <Text style={styles.title}>{data.item.title}</Text>
                    {data.item.status === 0 && <Text style={[styles.itemText, GlobalStyles.status.warning]}>未完成</Text>}
                    {data.item.status === 1 && <Text style={[styles.itemText, GlobalStyles.status.success]}>已完成</Text>}
                </View>
                <Text style={[styles.desc, styles.row]}>{data.item.desc}</Text>
                <View style={styles.row}>
                    <View style={styles.rowItem}>
                        <Text style={[styles.itemText, GlobalStyles.marginRight10]}>房间检查进度</Text>
                        <Text style={styles.itemText}>{item.completeTotal}/{item.roomTotal}</Text>
                    </View>
                    <View style={styles.rowItem}>
                        <Text style={[styles.itemText, GlobalStyles.marginRight10]}>截至日期</Text>
                        <Text style={styles.itemText}>{item.endDate}</Text>
                    </View>
                </View>
            </View>
        </TouchableOpacity>
    }

    updateIndex(selectedIndex) {
        this.setState({
            selectedIndex,
            data: originalData.items.filter(item => {
                if (selectedIndex === 0) return item
                if (selectedIndex === 1) {
                    return item.status === 0
                } else {
                    return item.status === 1
                }
            })
        })
    }


    /*
     *@Description: 加载数据
     *@param: refreshing {true:"下拉刷新",false:'上拉加载'}
     *@return: 
    */
    loadData(refreshing) {
        if (refreshing) {//下拉刷新
            this.setState({
                isLoading: true
            })
            setTimeout(()=>{ //模拟回掉
                this.setState({
                    isLoading: false
                })

            },1000)
        } else { //加载分页
            // this.setState({
            //     data: this.state.data.concat(this.state.data)
            // })
            this._onLoadMore()
        }
    }

    _onLoadMore(pageIndex) {
       
        this.setState({
            data: this.state.data.concat(originalData.items)
        })
    }
    onBack = () => {
        NavigationUtil.goBack(this.props.navigation);
    }


    render() {
        const { navigation } = this.props
        let { theme } = this.params
        let statusBar = {
            backgroundColor: theme,
            barStyle: 'light-content',
        };
        let navigationBar =
            <NavigationBar
                title={this.title}
                statusBar={statusBar}
                leftButton={ViewUtil.getLeftBackButton(() => this.onBack())}
                style={{ backgroundColor: theme }}
            />;

        const buttons = ['全部', '未完成', '已完成']
        const { selectedIndex } = this.state
        console.log(this.props)

        return (

            <SafeAreaViewPlus style={GlobalStyles.root_container}>
                {navigationBar}
                <ButtonGroup
                    onPress={this.updateIndex}

                    selectedIndex={selectedIndex}
                    buttons={buttons}
                    innerBorderStyle={{ width: 0.5 }}
                    textStyle={{ color: theme }}

                />
           
               
                <FlatList
                    data={this.state.data}
                    renderItem={data => this._renderItem(data)}
                    refreshControl={
                        <RefreshControl
                            title={'Loading'}
                            refreshing={this.state.isLoading}
                            onRefresh={() => {
                                this.loadData(true)
                            }}
                        />
                    }
                    ListFooterComponent={() => ViewUtil._genIndicator(this.state.hideMore,this.state.loadMore)}
                    onEndReached={() => {
                        setTimeout(() => {
                            if (this.canLoadMore && this.state.loadMore) {//fix 滚动时两次调用onEndReached https://github.com/facebook/react-native/issues/14015

                                this.loadData(false);
                                this.canLoadMore = false;
                            }
                        }, 100)
                    }}
                    onEndReachedThreshold={0.1}
                    onMomentumScrollBegin={() => {
                        this.canLoadMore = true; //fix 初始化时页调用onEndReached的问题
                    
                    }}
                />
               



            </SafeAreaViewPlus>
        )
    }

};

const styles = StyleSheet.create({

    container: {
        flex: 1
    },

    itemBox: {
        flex: 1,
        padding: 10,
        paddingHorizontal: 20,
        backgroundColor: '#fff',
        marginBottom: 10,
        marginRight: 10,
        marginLeft: 10,
        height: 100,

    },
    title: {
        color: "#333"
    },
    row: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: 10
    },
    itemText: {
        fontSize: 12,
        color: "#666"
    },

    desc: {
        fontSize: 11,
        color: "#aaa"
    },
    rowItem: {
        flexDirection: "row",
    }
});

